<template>
	<view class="worklog">
		<view class="worklog-content">
			<view class="work-item" v-for="(item,index) in WorkList" :key="index" @click="goLogInfo(item.id)">
				<view class="item-title">{{ item.title }}</view>
				<view class="item-bottom">{{ item.date }}</view>
				<view class="item-content">{{ item.content }}</view>
				<view class="img">
					<image :src="item.imgs"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
		export default {
			data() {
				return {
					pageNo:1,
					pageSize:10,
					status: 'loading',
					tolnum:0,
					WorkList:[]
				}
			},
			mounted() {
				this.pageWorkLog()
			},
			// 上拉
			onReachBottom() {
				this.pageNo = this.pageNo + 1
				if(this.pageNo > this.tolnum) {
					return this.status = 'nomore'
				}
				this.pageWorkLog()
			},
			// 下拉
			onPullDownRefresh() {
				this.WorkList=[]
				this.pageNo = 1;
				this.status = 'loading'
				this.pageWorkLog()
				setTimeout(function () {
				    uni.stopPullDownRefresh();
				}, 1500);
			},
			methods: {
				onNavigationBarButtonTap() {
				    uni.navigateTo({
				    	url:'../AddWorkLog/AddWorkLog'
				    })
				},
				pageWorkLog() {
					let params = {
						pageNo: this.pageNo,
						pageSize: this.pageSize
					}
					this.$u.api.pageWorkLog(params)
						.then(res => {
							console.log(res)
							if(res.code == 200) {
								this.tolnum = res.result.pages
								if (res.result.pages == 0) {
									this.status = 'nomore'
								}
								res.result.records.forEach(item => {
									this.WorkList.push(item)
								})
								this.status = 'nomore'
								if(this.pageNo == 1) {
									if(this.pageNo == this.tolnum) {
										this.status = 'nomore'
									}
								}
							}
						})
						.catch(err => {
							console.log(err)
						})
				},
				goLogInfo(id) {
					uni.navigateTo({
						url:'../WorkLogInfo/WorkLogInfo?id='+id
					})
				}
			}
		}
</script>

<style lang="scss" scoped>
	.worklog{
		background-color: #f5f6f7;
		min-height: 100vh;
		.worklog-head{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 90rpx;
		}
		.worklog-content{
			padding: 20rpx;
			.work-item{
				width: 100%;
				// height: 150rpx;
				display: flex;
				justify-content: space-around;
				align-items: flex-start;
				flex-direction: column;
				padding: 20rpx;
				border-radius: 10rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				box-shadow: 0 5px 5px #eee,0 0 5px #eee,0 0 5px #eee;
				.item-title{
					color: #333;
					font-size: 28rpx;
					font-weight: 600;
					text-align: left;
					width: 100%;
				}
				.item-bottom{
					color: #999;
					font-size: 24rpx;
					text-align: right;
					width: 100%;
				}
				.item-content{
					width: 100%;
					color: #333;
					font-size: 28rpx;
					padding: 10rpx 0;
					word-wrap: break-word;
				}
				.img{
					width: 140rpx;
					height: 180rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
</style>
